GTK+ 3 Glade

GTK+ 3 Glade C Programming Template Files

A set of template files for starting new GTK+ 3 C programming language projects using Glade for the GUI. The structure of the template directory separates the C source code and Glade files into their own sub-directories with a makefile in the main directory.

These template files make it easier to manage a project by separating the C source code and the Glade files. The makefile allows source code files to be added to the project easily as the project grows.

This article extends simple GTK+ 3 C programming using Glade and compiling by entering compile commands manually, to a better structured project and using a makefile.

Structure of the GTK+ 3 Glade Template Directory

The template has a src directory that contains the C source files for the project, and a glade directory that contains the Glade files. The makefile is found in the root directory of the template as shown in the image below.

GTK+ 3 Glade C Programming Template

GTK+ 3 and Glade Template Source Code

The template directory contains the following source code that can be copied to create a set of template files for your own projects.

The Makefile

Below is the contents of the file called makefile which must be placed in the root directory of the project.

—

# change application name here (executable output name)

TARGET=template_app

# compiler

CC=gcc

# debug

DEBUG=-g

# optimisation

OPT=-O0

# warnings

WARN=-Wall

PTHREAD=-pthread

CCFLAGS=$(DEBUG) $(OPT) $(WARN) $(PTHREAD) -pipe

GTKLIB=`pkg-config --cflags --libs gtk+-3.0`

# linker

LD=gcc

LDFLAGS=$(PTHREAD) $(GTKLIB) -export-dynamic

OBJS= main.o

all: $(OBJS)

$(LD) -o $(TARGET) $(OBJS) $(LDFLAGS)

main.o: src/main.c

$(CC) -c $(CCFLAGS) src/main.c $(GTKLIB) -o main.o

clean:

rm -f *.o $(TARGET)

—

Change the name template_app at the top of the file to the name of your project. This will be the name of the executable file that is generated after compiling.

Modify the makefile when new C source code files are added to the project so that the new files are compiled and linked.

Main C Source Code File

In the src directory, create a file called main.c and copy the following code to it.

—

#include <gtk/gtk.h>

int main(int argc, char *argv[])

{

GtkBuilder *builder;

GtkWidget *window;

gtk_init(&argc, &argv);

builder = gtk_builder_new();

gtk_builder_add_from_file (builder, "glade/window_main.glade", NULL);

window = GTK_WIDGET(gtk_builder_get_object(builder, "window_main"));

gtk_builder_connect_signals(builder, NULL);

g_object_unref(builder);

gtk_widget_show(window);

gtk_main();

return 0;

}

// called when window is closed

void on_window_main_destroy()

{

gtk_main_quit();

}

—

All C source code files that are added to the project can be placed in the src directory. Glade files that are used in the project are placed in the glade directory and accessed as such in the C source code as the following line of code from above shows.

—

gtk_builder_add_from_file (builder, "glade/window_main.glade", NULL);

—

Glade File

A new glade file can be created in the Glade editor or the code below can be copied to a file called window_main.glade in the glade directory.

—

<?xml version="1.0" encoding="UTF-8"?>

<property name="can_focus">False</property>

<property name="title" translatable="yes">Template Window</property>

<child>

</child>

</object>

</interface>

—

All new Glade files added to the project are to be put into the glade directory.

Building the GTK+ 3 Glade C Programming Template Project

Open a terminal window and change to the project directory. To build the project, enter make in the terminal window. This assumes that the correct software and libraries have been installed.

Build the project:

make

Clean the project — delete object and executable files:

make clean

If an error message appears when you try to build the project using make, open the make file in a text editor and be sure to replace the spaces that are used to indent text in the file with tab characters by using the Tab key. A typical error message is:

makefile:26: *** missing separator. Stop.

This indicates that the following indented line in the make file listing is indented with spaces instead of a tab character:

—

all: $(OBJS)

$(LD) -o $(TARGET) $(OBJS) $(LDFLAGS)

---

Glade Packing Tutorial

Learn how to use the Glade box container to pack widgets into a window in this Glade packing tutorial. Use widget packing instead of a fixed grid.

Glade Fixed Grid Window vs. Glade Packing Window

The images below show a comparison between two windows. One of the windows was created using a fixed grid, and the other window was created using packing. When the windows are resized the packed window automatically positions the widgets, whereas the fixed grid window leaves the widgets in the same place.

Glade Fixed Grid Window (left) vs. Glade Packing Window (right) Windows Enlarged in Size

Glade Fixed Grid (left) vs. Glade Packing (right) Windows Reduced to Minimum Size

In both images the window on the left is the window created in the GTK 3 C code ‘hello world’ tutorial using Glade 3 which uses a fixed grid. The window on the right is the window that will be created in this tutorial.

What is Packing in GTK?

Packing is a method of placing widgets in GTK and is used to position widgets in a window. Packing is usually done by creating boxes to place widgets in. Boxes are invisible widgets that can contain other widgets. They can be vertical or horizontal. Boxes can be placed inside other boxes to make the required number of areas available for placing widgets.

By default a new GTK window can only contain one widget. A container widget such as a fixed grid or box must be placed in the window in order to place other widgets onto the window.

In Glade, boxes are placed by selecting the Box widget under the Containers menu of the left widget pane. When a box is placed in a window, the number of items, corresponding to the number of widgets to be placed in the box, can be selected. The Orientation of the box can then be selected, either Vertical or Horizontal under the General tab of the Box Properties. Orientation determines whether widgets will be placed one above the other or next to each other.

Packing in GTK is a concept that needs some getting used to. Follow the tutorial below to see how to place a box to pack widgets into. Compare it to the fixed grid example. Run the fixed grid window application and the application from this tutorial and then try resizing the application windows to see the difference.

With more advanced applications and widgets the advantages of packing will become more obvious. Packing has some built in intelligence which is easy to see when placing more advanced widgets such as menu bars, scrolled windows and status bars. These widgets will be covered in later tutorials.

Tutorial Prerequisites

This tutorial follows the same format as the GTK+ 3 C code “hello world” tutorial using Glade 3 on this website. The project is created from the GTK+ 3 Glade 3 template files. Be familiar with the articles and tutorials listed below before continuing with this tutorial.

Glade Packing Example

Follow these tutorial steps to create a Glade window that uses the Glade box container for packing widgets instead of a fixed grid.

1. Start a New Project

Start a new project by making a copy of the GTK+ 3 Glade C programming template files.

Rename the template folder to packing. Open the makefile and rename the project to packing at the top of the make file as shown below.

—

# change application name here (executable output name)

TARGET=packing

---

Your project folder should now look as follows.

Glade Packing Project Structure

2. Edit the Glade File

Open the window_main.glade file in the glade folder using the Glade 3 editor.

2.1 Add the Box Container to the Window

Click Box under Containers in the left pane of Glade and then click the main window in Glade. A dialog box pops up asking for the number of items. Leave the value at the default of 3 and then click the Create button.

Inserting a Glade Box Container

The main window will now appear to be divided into three horizontal parts.

2.2 Add Two Text Labels

Drag and drop two Label widgets from the left pane in Glade under Control and Display into the first and second box areas of the main window.

Change the label IDs and text to the same names used in the GTK+ 3 C code Hello World tutorial using Glade 3 (as described below). This is so that we can use the same C code with this project, but see how Glade packing works.

Change the ID of the first label to lbl_hello and the label text to … as done in the above mentioned project.

Change the ID of the second label to lbl_count and the text to …

Your main window in the Glade editor should now look as follows.

Glade Window After Adding Labels

2.3 Add a Button

Drag and drop a Button widget from the left pane in Glade (under Control and Display) into the last (bottom) area of the box widget in the main window.

Change the button ID to btn_hello and the button text to Hello.

The button now spans the width of the window. To center the button, click the Common tab under Button Properties in the right bottom pane of Glade. Scroll down to find the Widget Spacing heading and change Horizontal: from Fill to Center as shown in the image below.

Changing Widget Spacing in Glade

The main window should now look as follows.

Widgets in Main Window

2.4 Change the Main Window Width and Title

If the main window is clicked in the Glade editor, the GtkBox that we inserted will be selected because is was placed on top of the main window. To select the main window, use the top right pane and click window_main GtkWindow.

Select the General tab on the bottom right pane in Glade. Scroll down to find the default width and height. Change the default width to 180. Uncheck the default height box.

Change the window title from Template Window to Packing under Title (above the width and height settings).

Changing the Glade Main Window Width and Title

2.5 Connect the Button Signal

Select the button by clicking it. Click the Signals tab in the bottom right pane of Glade. Under GtkButton, find clicked. Click the text next to clicked under the Handler heading that says <Type here>. Click it again to edit it and start typing on. Press the down arrow to select the name suggested by Glade which should be on_btn_hello_clicked. Press enter to select the text. Press enter again to set the text.

Connecting the Glade Button Clicked Signal

Save the changes and preview the window by clicking the cog icon on the top Glade toolbar.

3. Application C Code

Copy and paste the same code from the GTK+ 3 C code Hello World tutorial using Glade 3 project into main.c in the src folder. The code is included below.

—

#include <gtk/gtk.h>

GtkWidget *g_lbl_hello;

GtkWidget *g_lbl_count;

int main(int argc, char *argv[])

{

GtkBuilder *builder;

GtkWidget *window;

gtk_init(&argc, &argv);

builder = gtk_builder_new();

gtk_builder_add_from_file (builder, "glade/window_main.glade", NULL);

window = GTK_WIDGET(gtk_builder_get_object(builder, "window_main"));

gtk_builder_connect_signals(builder, NULL);

g_lbl_hello = GTK_WIDGET(gtk_builder_get_object(builder, "lbl_hello"));

g_lbl_count = GTK_WIDGET(gtk_builder_get_object(builder, "lbl_count"));

g_object_unref(builder);

gtk_widget_show(window);

gtk_main();

return 0;

}

void on_btn_hello_clicked()

{

static unsigned int count = 0;

char str_count[30] = {0};

gtk_label_set_text(GTK_LABEL(g_lbl_hello), "Hello, world!");

count++;

sprintf(str_count, "%d", count);

gtk_label_set_text(GTK_LABEL(g_lbl_count), str_count);

}

// called when window is closed

void on_window_main_destroy()

{

gtk_main_quit();

}

---

4. Build and Run the Project

Open a terminal window and change to the directory that your project is in. Build the project by entering make in the terminal window.

Run the project by entering ./packing into the terminal window or by double-clicking the packing application icon in the project folder from the file manager.

Clicking the Hello button should display “Hello, world!” in the first text label and increment a count in the second text label. The window can be resized and the widgets will now stay in the middle of the window horizontally.

Packing Application Window